<template>
    <div class="special-box">
        <div class="special-top">
            <van-nav-bar title="专题" />
        </div>
        <div class="special-content"></div>
        <van-list :finished="finished" finished-text="没有更多了" class="list-box" @load="getSpecialHanlder">
            <van-cell v-for="item in specialList" :key="item.id" class="item-box"
                @click="$router.push({ name: 'topdet', query: { id: item.id } })">
                <li>
                    <img :src="item.scene_pic_url" alt="" style="width:355px;height: 171px;">
                    <p class="title">{{ item.title }}</p>
                    <p class="text">{{ item.subtitle }}</p>
                    <p class="price">￥ {{ item.price_info }}</p>
                </li>
            </van-cell>
        </van-list>
    </div>
</template>

<script setup lang="ts">
import { getSpecialApi } from '@/api/special'
import { ref, onMounted, watch } from 'vue'

// 定义一个变量表示每一页
const count = ref<number>(0)
// 定义一个变量用来盛放数据
const specialList = ref<SpecialNs.ISpecialDateList[]>([])
// 准备一个变量, 表示数据是否完结
const finished = ref<boolean>(false)
const getSpecialHanlder = async () => {
    count.value++
    const res = await getSpecialApi((count.value).toString())
    // res.data.forEach((item) => {
    // specialList.value.push({
    //     id: item.id,
    //     price_info: item.price_info,
    //     scene_pic_url: item.scene_pic_url,
    //     subtitle: item.subtitle,
    //     title: item.title
    // })
    // })
    if (res.data.length < 5) {
        finished.value = true
        return
    }
    specialList.value.push(...res.data)
}
watch(() => count.value, () => {
    getSpecialHanlder()
})
onMounted(() => {
    getSpecialHanlder()
})

</script>

<style  lang="scss">
.special-box {
    position: relative;
    height: 100%;

    .special-top {
        .van-nav-bar {
            width: 100%;
            height: 46px;
            position: fixed;
            top: 0;
            left: 0;
        }
    }

    .special-content {
        margin-top: 55px;
    }

    .van-cell {
        padding: 0;
        width: 355px;
        margin: 0 auto;
        margin-bottom: 10px;

        li {
            display: flex;
            flex-direction: column;
            text-align: center;


            .title {
                color: rgb(73, 72, 72);
                padding: 5px
            }

            .price {
                color: rgb(112, 3, 3);
                padding: 5px
            }

            .text {
                display: block;
                width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 0 auto;
            }
        }
    }



}
</style>